<template>
  <div class="mybox">
    <v-list :person="person" @del="del" @edit="edit"></v-list>
    <span class="newpos" @click="isshow = true">新建联系人</span>
    <v-dialog
      v-if="isshow"
      @addperson="addperson"
      @delperson="delperson"
      :isdel="isdel"
      :editperson="person[index]"
      :isedit="isedit"
      @editperson="editperson"
    ></v-dialog>
  </div>
</template>

<script>
import vList from "../components/list";
import vDialog from "../components/dialog";
export default {
  components: {
    vList,
    vDialog,
  },

  data() {
    return {
      isshow: false,
      isdel: false,
      isedit:false,
      person: [
        {
          name: "z3",
          tel: "15531377622",
        },
        {
          name: "l4",
          tel: "15531addadad",
        },
        {
          name: "w5",
          tel: "1553137dada22",
        },
      ],
    };
  },
  methods: {
    addperson(obj) {
      if (obj) {
        this.person.push({ ...obj });
      }
      this.isshow = false;
    },
    
    del(index) {
      this.isshow = true;
      this.isdel = true;
      this.index = index
    },
    delperson(e) {

      if (e) {
        this.person.splice(this.index, 1);
      }
       this.isshow = false;
       this.isdel = false
    },
    edit(index){
        this.index = index
        this.isshow = true;
        this.isedit = true
    },
    editperson(e){
        
        if(e){
            console.log(e);
            this.person.splice(this.index,1,{...e})
        }
        this.isshow = false;
        this.isedit= false;
    }
  },
};
</script>

<style >
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.newpos {
  position: fixed;
  bottom: 20px;
  left: 15px;
  display: block;
  border-radius: 25px;
  background-color: #17be74;
  width: 90%;
  height: 50px;

  line-height: 50px;
  color: #fff;
}
</style>